{% comment %}
Icon: https://heroicons.com
{% endcomment %}

{% load static %}
{% load django_htmx %}

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="icon" href="{% static 'images/logo.ico' %}" />

    <link rel="stylesheet" type="text/css" href="{% static 'style/tailwind.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'style/form.min.css' %}" />

    {# translation script generated by Django #}
    <script src="{% url 'javascript-catalog' %}"></script>

    <script type="module" src="{% static 'script/base.js' %}"></script>
    {% django_htmx_script %}

    {% block head %}
    {% endblock %}

    {% if page_script_static_path %}
      <script type="module" src="{% static page_script_static_path %}"></script>
      {% elif has_page_script %}
      <script type="module" src="{% page_script_path %}"></script>
    {% endif %}

    <title>{% block title %}{% trans title %}{% endblock %}</title>

    <style>
      :root {
      /* slim-select */
      --ss-primary-color: hsl(from var(--color-neutral) h s l / 0.6);
      }
    </style>
  </head>



  <body class="tw:w-full tw:h-screen tw:flex tw:flex-col">
    {% include './components/messages.html' %}
        
    <div class="tw:drawer tw:drawer-end">
      <input id="by6_drawer_right" type="checkbox" class="tw:drawer-toggle" />
      <div class="tw:drawer-content">
        {# ==============================  #}
        {# NavBar                          #}
        {# ==============================  #}
        <div class="tw:flex-none tw:h-[var(--my-navbar-height)] tw:navbar tw:bg-base-100 tw:shadow tw:z-[1]">
          <div class="tw:flex-1 tw:flex tw:items-center" >
            <a class="tw:flex-initial" href="{% url "home" %}">
              <img class="tw:w-11" src="{% static 'images/logo.jpg' %}" alt="">
            </a>
            <a class="tw:flex-initial" href="{% url "home" %}">
              <img class="tw:w-12" src="{% static 'images/logos.png' %}" alt="">
            </a>

            <div class="tw:w-4"></div>

            <a class="tw:flex-initial tw:text-xl" href="{% url 'home' %}">
              {{ app_name }}
            </a>

            <div class="tw:w-4"></div>

            {# NOTE tabs-boxed cannot change color: https://github.com/saadeghi/daisyui/issues/2643 #}
            <div role="tablist" class="tw:tabs">
              <a role="tab" class="tw:tab {% if navbar_sec == 'project' %}tw:tab-active{% endif %}"
                href="{% url 'project:list' %}">
                {% translate '项目' %}
              </a>

              {% if perms.user.can_manage_projects or perms.user.can_manage_users or perms.user.can_manage_resources %}
                <a role="tab" class="tw:tab {% if navbar_sec == 'management' %}tw:tab-active{% endif %}"
                  href="{% url 'management' %}">
                  {% translate '管理' %}
                </a>
              {% endif %}

              <a role="tab" class="tw:tab
                {% if navbar_sec == 'resources' %}tw:tab-active{% endif %}"
                href="{% url 'media:public' %}">
                {% translate '公开资料' %}
              </a>
            </div>

          </div>


          <div class="tw:flex-none">
            <div class="tw:dropdown tw:dropdown-end">
              <div tabindex="0" role="button" class="tw:btn tw:btn-ghost">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="tw:size-6">
                  <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd" />
                </svg>
                                
                {% if user.full_name|cut:" " %}
                  {{ user.full_name }}
                  {% else %}
                  {{ user.username }}
                {% endif %}
              </div>

              <ul tabindex="0" class="tw:dropdown-content tw:menu tw:bg-base-100 tw:rounded-xl tw:border tw:z-1 tw:mt-3 tw:w-52 tw:p-2 tw:shadow">
                <li>
                  <a href="{% url 'user:settings/profile' %}" class="tw:flex tw:gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw:size-5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
                    </svg>
                    {% trans '个人资料' %}
                  </a>
                </li>
                {% if user.is_staff or user.is_superuser %}
                  <li>
                    <a href="{% url 'admin:index' %}" class="tw:flex tw:gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="tw:size-5">
                        <path fill-rule="evenodd" d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" clip-rule="evenodd" />
                      </svg>
                      {% trans '后台管理' %}
                    </a>
                  </li>
                {% endif %}
                <li>
                  <a href="{% url 'user:logout' %}?next=/" class="tw:flex tw:gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="tw:size-5">
                      <path fill-rule="evenodd" d="M7.5 3.75A1.5 1.5 0 0 0 6 5.25v13.5a1.5 1.5 0 0 0 1.5 1.5h6a1.5 1.5 0 0 0 1.5-1.5V15a.75.75 0 0 1 1.5 0v3.75a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3V5.25a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3V9A.75.75 0 0 1 15 9V5.25a1.5 1.5 0 0 0-1.5-1.5h-6Zm5.03 4.72a.75.75 0 0 1 0 1.06l-1.72 1.72h10.94a.75.75 0 0 1 0 1.5H10.81l1.72 1.72a.75.75 0 1 1-1.06 1.06l-3-3a.75.75 0 0 1 0-1.06l3-3a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
                    </svg>

                    {% trans '登出' %}
                  </a>
                </li>

                <div class="tw:m-0 tw:divider"></div>

                {% if user.is_staff %}
                  <li>
                    <a href="{% url 'docs/index' %}" class="tw:flex tw:gap-2">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="tw:size-5">
                        <path fill-rule="evenodd" d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" clip-rule="evenodd" />
                        <path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
                      </svg>
                      {% trans '文档' %}
                    </a>
                  </li>
                {% endif %}
                <li>
                  <a href="https://by6pms.zulipchat.com" target="_blank" class="tw:flex tw:gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="tw:size-5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
                    </svg>


                    {% trans '反馈问题' %}
                  </a>
                </li>
             </ul>
            </div>
          </div>
        </div>


        <div class="tw:flex-none tw:h-[calc(100vh-var(--my-navbar-height))] tw:flex tw:w-full">
          {# ==============================  #}
          {# Sidebar                         #}
          {# ==============================  #}
          {% if not hide_sidebar %}
            <div id="sidebar" class="tw:flex-initial tw:h-[calc(100vh-var(--my-navbar-height))] tw:w-80 tw:overflow-auto tw:border-r-2 tw:border-r-neutral/30 tw:rounded-br-2xl">
              <div class="tw:relative tw:group tw:bg-base-200 tw:min-h-full">
                <div class="tw:hidden tw:group-hover:block tw:absolute tw:inset-y-1/2 tw:right-0">
                  <div id="sidebar-close-btn" aria-label="close sidebar" class="tw:bg-base-100/70 tw:hover:bg-base-100 by6-toggle-sidebar-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="tw:size-4">
                      <path fill-rule="evenodd" d="M7.28 7.72a.75.75 0 0 1 0 1.06l-2.47 2.47H21a.75.75 0 0 1 0 1.5H4.81l2.47 2.47a.75.75 0 1 1-1.06 1.06l-3.75-3.75a.75.75 0 0 1 0-1.06l3.75-3.75a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
                    </svg>
                  </div>
                </div>

                <div class="tw:p-4">
                  {% block body-sidebar %}
                    <ul class="tw:menu tw:size-full">
                      {% block body-sidebar-menu %}
                        {% comment %}
                        menu docs: https://daisyui.com/components/menu/
                        {% endcomment %}
                      {% endblock%}
                    </ul>
                  {% endblock %}
                </div>
              </div>
            </div>
          {% endif %}


          {# ==============================  #}
          {# Content                         #}
          {# ==============================  #}
          <div class="tw:relative tw:w-full tw:h-full">
            {% block content %}
              {% if not hide_sidebar %}
                <div class="tw:absolute tw:left-0 tw:inset-y-1/2 tw:z-[1]">
                  <div id="sidebar-show-btn" aria-label="show sidebar" class="tw:hidden tw:bg-base-200/70 tw:hover:bg-base-200 by6-toggle-sidebar-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="tw:size-4">
                      <path fill-rule="evenodd" d="M16.72 7.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H3a.75.75 0 0 1 0-1.5h16.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
                    </svg>
                  </div>
                </div>
              {% endif %}

              <div class="tw:flex tw:flex-col tw:w-full tw:h-full tw:px-2 tw:overflow-y-hidden">
                {% if not hide_headline %}
                  <div class="tw:flex-none tw:flex tw:border-b tw:border-b-neutral/50">
                    <div id="headerline-crumbs" class="tw:flex-1 tw:flex tw:gap-2 tw:h-full tw:items-center tw:py-[0.5rem] tw:text-sm">
                      {% block crumbs %}
                        <div class="tw:breadcrumbs tw:py-0">
                          <ul>
                            <li>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="tw:size-4">
                                <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
                                <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
                              </svg>
                            </li>

                            {% comment %}
                            Use `li` element to wrap a single breadcrumb
                            <li><a></a></li>: middle breadcrumb
                            <li></li>: rear breadcrumb
                            {% endcomment %}

                            {% if breadcrumbs %}
                              {% for breadcrumb in breadcrumbs %}
                                {% if not forloop.last %}
                                  <li><a{% if breadcrumb.view_name %}href="{% url breadcrumb.view_name %}"{% endif %}>{% trans breadcrumb.text %}</a></li>
                                  {% else %}
                                  <li>{% trans breadcrumb.text %}
                                {% endif %}
                              {% endfor %}

                              {% block crumbs-extend %} {% endblock %}</li>
                            {% endif %}
                          </ul>    
                        </div>
                      {% endblock %}
                    </div>
                                        
                    <div class="tw:flex-none">
                      {# TODO #}
                      <div id="headerline-crumbs-right" class="tw:flex tw:gap-2 tw:h-full tw:items-center">
                        {% block crumbs-right %}
                        {% endblock %}
                      </div>
                    </div>
                  </div>
                {% endif %}

                <div class="tw:flex-1 tw:relative tw:overflow-hidden">
                  {% block body-outer %}
                    <div id="body" class="tw:h-full tw:overflow-y-auto tw:px-4 tw:py-2">
                      {% block body %}

                      {% endblock %}
                    </div>
                  {% endblock %}
                </div>
              </div>
            {% endblock %}
          </div>
        </div>

        {% block base-script %}{% endblock %}

      </div>
      {# z-index for drawer-side is needed since ag-grid separator has z-index 2 #}
      <div class="tw:drawer-side tw:z-3">
        <label for="by6_drawer_right" aria-label="close sidebar" class="tw:drawer-overlay"></label>
        {# specify a width in the children if a width is needed #}
        <div class="tw:bg-base-200 tw:text-base-content tw:min-h-full tw:p-4" id="by6_drawer_right_body">
        </div>
      </div>
    </div>
  </body>

  {% comment %}
  ================================================================================
  Modals
  ================================================================================
  {% endcomment %}


  <dialog id="by6_modal_xl" class="tw:modal">
    <div class="tw:w-11/12 tw:max-w-5xl tw:relative">
      <!-- Remove tw:fixed class and adjust positioning -->
      <div class="tw:relative">
        <form method="dialog">
          <button class="tw:btn tw:btn-sm tw:btn-circle tw:absolute tw:-right-3 tw:-top-3 tw:z-10">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
              stroke="currentColor" class="tw:size-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </form>
      </div>

      <!-- Add tw:relative to ensure proper positioning context -->
      <div class="tw:w-full tw:relative tw:modal-box tw:max-w-5xl">
        {% block by6-modal-xl-body %}
        {% endblock %}
      </div>
    </div>
  </dialog>

  <dialog id="by6_modal_js" class="tw:modal">
    <div class="tw:w-11/12 tw:max-w-5xl tw:relative">
      <!-- Remove tw:fixed class and adjust positioning -->
      <div class="tw:relative">
        <form method="dialog">
          <button id="by6_modal_js_close_btn" class="tw:btn tw:btn-sm tw:btn-circle tw:absolute tw:-right-3 tw:-top-3 tw:z-10">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
              stroke="currentColor" class="tw:size-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </form>
      </div>

      <!-- Add tw:relative to ensure proper positioning context -->
      <div class="tw:w-full tw:relative tw:modal-box tw:max-w-5xl" id="by6_modal_js_body">
      </div>
    </div>
  </dialog>

</html>
